<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue事件处理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>绑定事件</h3>
			<button type="button" @click="clickHandle1">绑定点击事件</button>
			<hr >
			
			<h3>绑定事件并传递参数</h3>
			<button type="button" @click="clickHandle2('aa', $event)">绑定点击事件并传递参数</button>
			<hr >
			
			<h3>事件修饰符</h3>
			<div @click="clickHandle4">
				<!-- 阻止默认行为，阻止事件冒泡  -->
				<a href="https://www.baidu.com" @click.prevent.stop="clickHandle3">百度</a>
			</div>
			<hr >
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			methods: {
				clickHandle1: function(event){
					alert('点击了按钮');
					console.log(event.type);
				},
				clickHandle2: function(data, event) {
					alert('点击了按钮，参数：' + data);
					console.log(event.type);
				},
				clickHandle3: function(event) {
					alert('只会触发点击事件，不跳转');
				},
				clickHandle4: function(event) {
					alert('点击了超链接外面的div')
				}
			}
		});
	</script>
</html>
